<template>
  <!-- 父评论 -->
  <div>
    <!-- 注意:parentext是一直parent传值下去,直到parentext不再有parent -->
    <!--2. intermediary是给页面的一个事件,一直传,this.$emit传到main..主评论,直到main..可以@parentReplyReplyTh到 -->
    <div class="parentcomment">
      <extend
        :parentext="parentext.parent"
        v-if="parentext.parent"
        @parentReplyReplyTh="intermediary"
      />
      <div class="parentcss">
        <div class="parentinfo">
          <span class="num">{{sequence}}</span>
          <span class="nickname">{{parentext.user.nickname}}</span>
          <span class="time">{{parentext.create_date.split('T')[0]}}</span>
        </div>
        <div class="reply" @click="parentReply">回复</div>
      </div>
      <div class="content">{{parentext.content}}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "extend",
  props: ["parentext"], //首次是extend下面代码调用,之后由extend的:parentext递归使用
  data() {
    return {};
  },
  methods: {
    //层级回复升级递归写法思路,将id一级级往下传出去到页面(id一定要保持那个id),传到主评论main..然后传给newsdetails页面再传给publish回复控件.这个parents页面的回复不指定是哪一个的,可以说是任意一个,所以点击层级回复是点这个页面的回复,浏览器页面点了哪个层级的回复都是这个页面的回复事件,然后一级级传到主最外面的主评论------传id到主评论,主评论到new页面,new页面到回复控件publish

    parentReply() {
      this.$emit("parentReplyReplyTh", {
        id: this.parentext.id,
        name: this.parentext.user.nickname
      });
    },
    //  1.会一直传到最外面那个主评论回复,然后传给new页面
    intermediary(parentReplydata) {
      this.$emit("parentReplyReplyTh", parentReplydata);
    }
  },
  computed: {
    sequence() {
      var numder = 1;
      var parentRank = this.parentext;
      if (parentRank.parent) {
        numder++;
        //重新将这代的parentRank.parent赋值到parentRank
        parentRank = parentRank.parent;
      }
      return numder;
    }
  }
};
</script>

<style lang="less" scoped>
.parentcomment {
  // margin-top: -1px;
  padding: 10px;
  border: 1px solid #e4e4e4;
  .parentcss {
    display: flex;
    .parentinfo {
      flex: 1;
      margin: 10px 0;
      span {
        margin-right: 6px;
      }
      .num {
        font-size: 13px;
        color: #555;
      }
      .nickname {
        font-size: 13px;
        color: #555;
      }
      .time {
        font-size: 12px;
        color: #888;
      }
    }
    .reply {
      font-size: 12px;
      color: #999;
    }
  }
  .content {
    font-size: 13px;
    color: #555;
  }
}
</style>